<template>
  <div :class="$style.container"
    v-loading.fullscreen.lock="loading"
  >
    <el-card>
      <div slot="header">
        <span :class="$style.title">个人中心</span>
        <el-button round @click.stop="handleModifyClcick">修改</el-button>
      </div>
      <el-form :model="form" label-width="80px">
        <el-form-item label="昵称:">
          <span :class="$style.text">{{form.name}}</span>
        </el-form-item>
        <el-form-item label="年龄:">
          <span :class="$style.text">{{form.age}}</span>
        </el-form-item>
        <el-form-item label="手机号:">
          <span :class="$style.text">{{form.phone}}</span>
        </el-form-item>
        <el-form-item label="邮箱:">
          <span :class="$style.text">{{form.email}}</span>
        </el-form-item>
        <el-form-item label="头像:">
          <img :src="this.$prefix+'/downLoadFile?fileId=' + form.avatar" :class="$style.img"/>
        </el-form-item>
        <el-form-item label="性别:">
          <el-radio-group v-model="form.gender" disabled>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog title="修改个人资料" :visible.sync="showModal">
      <el-form :model="user" label-width="80px" :rules="rules" ref="ruleForm" >
        <el-form-item label="昵称:" prop="name">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄:"  prop="age">
          <el-input v-model="user.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="user.phone" type="tel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="user.email" type="email"></el-input>
        </el-form-item>
        <el-form-item label="头像:">
          <el-upload
            class="avatar-uploader"
            action="/uploadFile"
            :show-file-list="false"
            name="files"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="user.avatar" :src="this.$prefix+'/downLoadFile?fileId='+user.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="性别:">
         <el-radio-group v-model="user.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :class="$style.btn">
          <el-button size="small" @click.stop="showModal=false">取消</el-button>
          <el-button size="small" type="primary" @click="onSubmit('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { validateEmail,validatePhone } from '../../../../utils/config'
export default {
  data() {
    let validAge = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入年龄'));
        } else {
          let age = +value
          if (age > 0 && age < 200) {
            callback()
          } else {
            callback(new Error('请输入合法的年龄'));
          }
        }
      }

      let validPhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else {
          if (validatePhone(value)) {
            callback();
          } else {
            callback(new Error('请输入合法的手机号'));
          }
        }
      }

      let validEmail = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入邮箱'));
        } else {
          if (validateEmail(value)) {
            callback();
          } else {
            callback(new Error('请输入合法的邮箱'));
          }
        }
      }
    return {
      form: {},
      user: {},
      showModal: false,
      imageUrl: '',
      loading:false,
      rules:{
        name: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
        ],
        age: [
           { validator: validAge, trigger: 'blur' }
        ],
        phone: [
           { validator: validPhone, trigger: 'blur' }
        ],
        email:[
           { validator: validEmail, trigger: 'blur' }
        ]
      }
    };
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        this.loading = true
        let res = await this.$http.get(`/users/getUserInfo`)
        this.loading = false
        this.form = res.data
        this.$store.commit('SET_USER',res.data)
      } catch(err) {
        this.loading = false
        console.log('111:',err)
      }
    },
    // 打开模态框修改个人资料
    handleModifyClcick () {
      this.user = {...this.form}
      this.showModal = true
    },
    /**
     * 模态框提交
     */
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            this.updateUserInfo()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 上传头像成功
    handleAvatarSuccess (res, file) {
      this.user.avatar = res.data[0]._id
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    /**
     * 修改用户信息
     */
    async updateUserInfo () {
      try {
        this.showModal = false
        await this.$http.post(`/users/updateUserInfo`, this.user)
        // this.$store.commit('SET_USER',this.user)
        this.init()
      } catch(err) {
        this.loading = false
        console.log(err)
      }
    }
  }
};
</script>
<style lang="scss" module>
.container {
  padding: 20px;
  height: 1000px;
  .title {
    margin-right:20px;
    font-size:18px;
    color:#333;
  }
  .text {
    font-size:16px;
    color:#666;
  }
  .img {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 5px;
  }
  .btn {
    margin-right: 20px;
    text-align: right;
  }
}
</style>


<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
